<style lang='less' >
  .ppBtnBox{
  #btnsBox{
    text-align: left;
  button{
    background-color: transparent;
    color:#63c5ce;
    font-size: 14px;
    padding:0 10px;
    border-right: 1px solid #63c5ce;
  &:last-child{
     border:none;
   }
  }
  .fontColorGary{
    color: #bbb;
  }
  }
  .el-dialog__wrapper{
    text-align: left;
  .el-dialog{
    width: 40%;

  .el-dialog__header{

    background-color: #f6f6f6;
    padding: 10px;
    border-radius: 2px 2px 0 0;
  }
  .el-dialog__body{
    padding: 30px 50px 20px;
  .el-form-item__label{
    text-align: center;
  }
  }
  }

  }
  }
</style>

<template>
  <div class="ppBtnBox">

    <div id='btnsBox'>
      <button v-if='btnControl && btnControl.appointmentListAssign' @click='showDetail(scope.$index, scope.row)'>修改</button>
    </div>

    <el-dialog title="更改预约客户记录" width='40%' v-if="dialogFormVisible" :visible.sync="dialogFormVisible" >
      <el-form :model="dialogForm" :rules="rules" ref="dialogForm">

        <el-form-item label="预约编号" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.recordNo" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.productName" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="理财师电话" :label-width="formLabelWidth" prop="financialPhone">
          <el-input v-model.number.lazy="dialogForm.financialPhone" type='number' auto-complete="off">

          </el-input>
        </el-form-item>

        <el-form-item label="预约理财师" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.financialName" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>


        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select
            clearable
            class="filterInput"
            v-model="dialogForm.status"
            placeholder="请选择">
            <el-option
              v-for="item in reservationRecordType"
              :key="item.name"
              :label="item.value"
              :value="item.name">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.remark" auto-complete="off"></el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getDetail,postUpdate,getUserInfo} from 'api/transactionManagement/index.js'

  var validTel = (rule, value, callback) => {
    if(!(/^1[34578]\d{9}$/.test(value))){
      callback(new Error('请输入正确的手机号'))

    }else{
      callback()
    }
  };

  const formRules = {
    financialPhone: [
      { required: true,validator: validTel, trigger: 'blur' },
    ]
  };

  export default {
    props:['btnControl','scope','reservationRecordType'],
    components:{
    },
    data(){


      return{
        dialogFormVisible:false,//更改状态的弹出框
        formLabelWidth:'120px',
        rules:formRules,//判断规则
        dialogForm:{
          id:'',
          userName:'',
          recordNo:'',
          phone:'',
          productName: '',
          issuerName: '',
          financialName:'',
          financialDepartment:'',
          financialPhone:null,
          recordDate:'',
          ifa:'',
          source:'',
          status:'',
          remark:'', 
        },

      }
    },
    computed:{
    },
    watch:{
      dialogForm:{
        deep:true,
        handler:function(val,oldVal){
          if(val.financialPhone.toString().length != 11){
//            console.log('financialPhone.length!!', val.financialPhone.toString().length)
            return;
          }
          this.loadUser(val.financialPhone);
        }
      }
    },
    methods:{
      showDetail(index, row){
        console.log('showDetail', index, row)
        this.dialogFormVisible= true
        this.loadFormData(row)
      },
      async loadFormData(row){
        try{
          console.log('loadFormData', this.dialogForm)
          let back = await getDetail(row.id)
          back = back.data;
          console.log('getDetail', back)
          if(back && back.resultCode =='200'){
            this.dialogForm = back.result
          }else{
            this.$alert(back.msg)
          }

        }catch(err){
          console.error(err)
        }
      },

      async loadUser(financialPhone){
        try {
          let back = await getUserInfo(financialPhone)
          back = back.data;
          console.log('getDetail', back)
          if (back == null || back.resultCode != '200') {
            this.dialogForm.financialPhone = null;
            this.$alert(back.msg)
            return;
          }
          if (back.result.isInside == '0') {
            this.dialogForm.financialPhone = null;
            this.$alert('请正确输入理财师电话号码');
            return;
          }
          this.dialogForm.financialName = back.result.userRealName
        } catch (err) {
          console.error(err)
        }
      },
      submitForm(){
        this.$refs['dialogForm'].validate((valid) => {
          console.log(valid)
          if (valid) {
            console.log('submit!');
            this.changeDetail()
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      async changeDetail(){
        try{
          console.log('changeDetail', this.dialogForm)
          let back = await postUpdate(this.dialogForm)
          back = back.data;
          console.log('postUpdate', back)
          if(back && back.resultCode =='200'){
            this.$alert(back.msg,{
              callback: action =>{
                this.dialogFormVisible = false
              }
            })
          }else{
            this.$alert(back.msg)
          }
        }catch(err){
          console.error(err)
        }
      },
    },
  }
</script>
